<template>
  <!-- html结构 -->
  <!-- 有且只有一个根元素 -->
  <div>
    <div class="father">
      <!-- data里面要有  if for不能用， 行内属性不能用 -->
      <div class="son">{{ msg }}</div>
      <div class="son2">222</div>
      <div>{{ obj.name }}</div>
      <div>{{ obj.age >= 18 ? '成年' : '未成年' }}</div>
      <div>{{ msg.toUpperCase() }}</div>

      <!-- v—bind缩写  动态控制元素属性(行内属性) -->
      <a :href="url">百度跳转</a>
    </div>
  </div>
</template>

<script>
// js结构

export default {
  //导出一个data函数，返回一个对象
  data() {
    return {
      msg: 'vue haha',
      obj: {
        age: 20,
        name: 'ikun',
      },
      url: 'http://www.baidu.com',
    };
  },
};
</script>

<style lang="less">
// 要使用less，属性写上lang='less' 下包
/* css样式 */

.father {
  .son {
    color: #c12828;
  }
}
</style>
